<template>

  <section>
    <!--start 面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>资金</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/fundAccount'}">资金账户</el-breadcrumb-item>
        <el-breadcrumb-item>资金明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end 面包屑-->

    <!--start content-->
    <div class="content">
      <!--ziJin-con  start-->
      <div class="ziJin-con">
        <div class="zJ-header">
          <span class="zJ-header-span">客户级别：<i>{{gradeName}}</i></span>
          <span class="zJ-header-span">总金额：<i>{{pageData.fundMoney}}</i></span>
          <span class="zJ-header-span1">待确认收款：<i>0.00</i></span>
        </div>

        <!--充值弹出   start-->
        <div class="height-search">
          <transition name="fade">
            <div class="modal-backdrop" v-show="recharge"></div>
          </transition>
          <transition name="slideDown">
            <div class="recharge-s-con" v-show="recharge">
              <p class="search-title">充值</p>
              <el-form ref="rechargeForm" class="enclosure" :rules="rules" :model="rechargeForm" label-width="80px">
                <el-form-item label="客户名称" prop="memberName">
                  <el-input :disabled="true" v-model="rechargeForm.memberName"></el-input>
                </el-form-item>
                <el-form-item label="充值日期" style="float: right" prop="rechargeDate">
                  <el-date-picker
                    v-model="rechargeForm.rechargeDate"
                    type="datetime"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="金额" prop="rechargeMoney">
                  <el-input v-model="rechargeForm.rechargeMoney"></el-input>
                </el-form-item>
                <el-form-item label="备注" style="float: right" prop="rechargeRemark">
                  <el-input type="textarea" v-model="rechargeForm.rechargeRemark"></el-input>
                </el-form-item>
                <el-form-item label="充值摘要" prop="rechargeSummary">
                  <el-select v-model="rechargeForm.rechargeSummary" placeholder="请选择">
                    <el-option label="现金充值" value="现金充值"></el-option>
                    <el-option label="销售返点" value="销售返点"></el-option>
                    <el-option label="其他充值" value="其他充值"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="附件"  prop="fuJan">
                  <el-upload
                    class="upload-demo clearfix"
                    action="/v3/misc/common/uploadFile"
                    :data="vue_upload_rechargeData"
                    :on-remove="vFun_upload_remove"
                    :on-success="vFun_upload_success"
                    :on-error="vFun_upload_error"
                    :before-upload="vFun_upload_before">
                    <el-button class="elButton fl"><em class="iconfont tab-hover el-icon-upload2"></em>点击上传</el-button>
                    <div class="el-upload__tip fl" title="建议上传订单付款凭证，如汇款单等；附件支持JPG/PNG/Word/Excel/Text格式，大小不超过4M">建议上传订单付款凭证，如汇款单等；附件支持JPG/PNG/Word/Excel/Text格式，大小不超过4M</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label-width="15px">
                  <el-button @click="rechargeSure" :disabled="clickBtn" type="primary">确定</el-button>
                  <el-button @click="rechargeCancel">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
          </transition>
        </div>
        <!--充值弹出  end-->

        <!--扣款弹出   start-->
        <div class="height-search">
          <transition name="fade">
            <div class="modal-backdrop" v-show="chargeBack"></div>
          </transition>
          <transition name="slideDown">
            <div class="recharge-s-con" v-show="chargeBack">
              <p class="search-title">扣款</p>
              <el-form  ref="chargeFromData" class="enclosure" :rules="rules1" :model="chargeFromData" label-width="80px">
                <el-form-item label="客户名称" prop="memberName">
                  <el-input :disabled="true" v-model="chargeFromData.memberName"></el-input>
                </el-form-item>
                <el-form-item label="扣款日期" style="float: right" prop="withdrawDate">
                  <el-date-picker v-model="chargeFromData.withdrawDate" type="datetime" placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="金额" prop="withdrawMoney">
                  <el-input v-model="chargeFromData.withdrawMoney"></el-input>
                </el-form-item>
                <el-form-item label="备注" style="float: right" prop="withdrawRemark">
                  <el-input type="textarea" v-model="chargeFromData.withdrawRemark"></el-input>
                </el-form-item>
                <el-form-item label="扣款摘要" prop="withdrawSummary">
                  <el-select v-model="chargeFromData.withdrawSummary" placeholder="请选择">
                    <el-option label="提现" value="提现"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="附件"  prop="fuJan">
                  <el-upload
                    class="upload-demo clearfix"
                    action="/v3/misc/common/uploadFile"
                    :data="vue_upload_withdrawData"
                    :on-remove="vFun_upload_remove1"
                    :on-success="vFun_upload_success1"
                    :on-error="vFun_upload_error1"
                    :before-upload="vFun_upload_before1">
                    <el-button class="elButton"><em class="iconfont tab-hover el-icon-upload2"></em>点击上传</el-button>
                    <div class="el-upload__tip">建议上传订单付款凭证，如汇款单等；附件支持JPG/PNG/Word/Excel/Text格式，大小不超过4M</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label-width="15px">
                  <el-button @click="chargeBackSure" :disabled="clickBtn"  type="primary">确定</el-button>
                  <el-button @click="chargeBackCancel">取消</el-button>
                </el-form-item>
              </el-form>

            </div>
          </transition>
        </div>
        <!--扣款弹出  end-->


        <!--高级搜索  start-->
        <div class="height-search">
          <transition name="fade">
            <div class="modal-backdrop" v-show="heightSearch"></div>
          </transition>
          <transition name="slideDown">
            <div class="height-s-con" v-show="heightSearch">
              <p class="search-title">高级搜索</p>
              <el-form ref="Form" :model="form" label-width="80px">
                <el-form-item label="关键字" prop="keyName">
                  <el-input v-model="form.keyName" placeholder="支付流水号"></el-input>
                </el-form-item>
                <el-form-item label="收支类型" prop="paymentType">
                  <el-select v-model="form.paymentType" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="收入" value="0"></el-option>
                    <el-option label="支出" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="支付时间" prop="dataTime">
                  <el-date-picker v-model="form.dataTime" type="daterange" placeholder="选择日期范围">
                  </el-date-picker>
                </el-form-item>
                <!--<el-form-item label="支付方式" prop="payType">
                  <el-select v-model="form.payType" placeholder="请选择">
                    <el-option label="全部" value="qb"></el-option>
                    <el-option label="线下支付" value="xx"></el-option>
                  </el-select>
                </el-form-item>-->
                <el-form-item label-width="15px">
                  <el-button @click="searchSure" type="primary">确定</el-button>
                  <el-button @click="searchCancel">取消</el-button>
                  <el-button @click="searchClear" type="text">清空</el-button>
                </el-form-item>
              </el-form>
            </div>
          </transition>
        </div>
        <!--高级搜索  end-->


        <!--下面的内容区  start-->
        <div class="zJ-box" ref="contentWrap">
          <table class="zJ-table" border="0" cellspacing="0" cellpadding="0">
            <tr><th>账户</th><th>余额</th><th>操作</th></tr>
            <tr>
              <td>可用金额</td>
              <td>{{pageData.fundAvailMoney}}</td>
              <td><a @click="rechargeBn">充值</a><a @click="chargeBackBn">扣款</a></td>
            </tr>
            <tr>
              <td>冻结资金</td>
              <td>{{pageData.fundLockMoney}}</td>
              <td></td>
            </tr>
            <tr>
              <td class="fontW">总计</td>
              <td>{{pageData.fundMoney}}</td>
              <td></td>
            </tr>
          </table>
          <!--搜索区   start-->
          <div class="search-tip">
            <div class="zJ-header">
              <div class="public-th clearfix">
                <div class="public-left clearfix">
                  <div class="block">
                    <el-date-picker
                      type="daterange"
                      v-model="valueData"
                      @change="dateChange"
                      placeholder="选择日期范围">
                    </el-date-picker>
                  </div>
                </div>
                <span class="fl high_search" @click="heightSearchShow">高级搜索</span>
              </div>
            </div>
          </div>
          <!--搜索区  end-->
          <!--资金块状展示  start-->
          <div class="moneyList">
            <div class="moneyListCon">
              <div class="div1">
                <div class="fund-totalBlance-val">{{inSumMoney}}</div>
                <div class="fund-totalBlance-txt">收入</div>
              </div>
            </div>
            <div class="moneyListCon">
              <div class="div2">
                <div class="fund-totalBlance-val">{{outSumMoney}}</div>
                <div class="fund-totalBlance-txt">支出</div>
              </div>
            </div>
          </div>
          <!--资金块状展示  end-->
          <!--表格区   start-->
          <el-table
          	class="rightFixed"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="listCode"
              label="支付流水号"
              width="200">
              <template scope="scope">
                <span v-html='scope.row.listCode '></span>
              </template>
            </el-table-column>
            <el-table-column
              label="支付时间"
              width="200"
              prop="createDateStr">
            </el-table-column>
            <el-table-column
              prop="listSummary"
              label="摘要"
              width="150">
            </el-table-column>
            <el-table-column
              prop="fromActionStr"
              label="支付方式"
              width="150">
            </el-table-column>
            <el-table-column
              prop="inListMoney"
              label="收入"
              min-width="200">
            </el-table-column>
            <el-table-column
              prop="outListMoney"
              label="支出"
              min-width="200">
            </el-table-column>
            <el-table-column
              prop="fundNowAvailMoney"
              min-width="200"
              label="可用余额">
            </el-table-column>
            <el-table-column
              fixed="right"
              label=""
              width="60">
              <template scope="scope">
                <el-popover trigger="hover" placement="bottom">
                  <p class="p" style="cursor: pointer;" @click="goTo(scope.$index, tableData)"><em class="iconfont" style="font-size: 15px">&#xe656;</em>详情</p>
                  <!--<p class="p" style="cursor: pointer;" @click="voidPay(scope.$index, tableData)"><em class="iconfont" style="font-size: 16px">&#xe641;</em>红冲</p>-->
                  <div slot="reference" class="name-wrapper">
                    <el-tag><em class="iconfont tab-hover">&#xe607;</em></el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <!--分页  start-->
          <div class="block">
            <el-pagination
              @size-change="page_handleSizeChange"
              @current-change="page_handleCurrentChange"
              :current-page="parseInt(pageTools.pageNo)"
              :page-sizes="pageTools.pageSizeOptions"
              :page-size="parseInt(pageTools.pageSize)"
              :total="parseInt(pageTools.recordCount)"
              layout="total, prev, pager, next, sizes,jumper">
            </el-pagination>
          </div>
          <!--分页  end-->

          <!--表格区  end-->

        </div>
        <!--下面的内容区  end-->
      </div>
      <!--ziJin-con  end-->
    </div>
    <!--end content-->
  </section>

</template>

<script>
  export default {
    data() {
      var rechargeM = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('所填充值金额不能为空'));
        }
          if (parseInt(value) != value) {
            callback(new Error('请输入数字值'));
          } else {
            callback();
          }
      };
      var chargeM = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('所填扣款金额不能为空'));
        }
          if (parseInt(value) != value) {
            callback(new Error('请输入数字值'));
          } else {
            callback();
          }
      };
      var cdate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('日期不能为空 '));
        }else {
            callback();
        }
      };
      return {
      	vue_upload_rechargeData:{  //充值附件
					"moduleName":"fund",
					"fileName":"",
					"fromCode":"",
					"fromTable":"FundRecharge",
				},
      	vue_upload_withdrawData:{  //扣款附件
					"moduleName":"fund",
					"fileName":"",
					"fromCode":"",
					"fromTable":"FundWithdraw",
				},
//      	page:this.$store.state.page,   //分页首次默认数据
        pageTools:{},	        //分页数据
      	params:{},
        clickBtn:false,                 //请求数据后禁用按钮
      	gradeName:"",                    //客户等级
        heightSearch: false,            //高级搜索显示
        recharge: false,                //充值弹出显示
        chargeBack: false,              //扣款弹出显示
        valueData:[],                   //日历日期
        pageData: {},                   //页面数据
        tableData: [],                  //表格数据
        rechargeForm: {                 //充值form表单
          memberName: '',               //会员名称
          rechargeDate: new Date(),             //充值时间
          rechargeMoney: '',            //充值金额
          rechargeRemark: '',          //充值备注
          rechargeSummary: '',          //充值摘要
          fundCode: '',                 //账户代码
          memberCode: '',               //会员代码
        },
        chargeFromData:{                 //扣款form表单
          memberName:'',                 //客户姓名
          withdrawDate: new Date(),               //扣款时间
          withdrawMoney:'',              //扣款金额
          withdrawSummary:'',             //扣款摘要
          withdrawRemark:'',             //扣款备注
          fundCode: '',                 //账户代码
          memberCode: '',               //会员代码
        },
        rules: {                        //充值验证信息
          memberName: [
            {required: true, message: '请输入客户名称', trigger: 'blur'},
          ],
          rechargeMoney: [
            {required: true, validator: rechargeM, trigger: 'blur'},
          ],
          rechargeSummary: [
            {required: true, message: '请输入充值摘要', trigger: 'blur'},
          ],
          rechargeDate:[
          	{ required: true, validator: cdate, trigger: 'blur' },
          ]
        },
        rules1: {                        //充值验证信息
          memberName: [
            {required: true, message: '请输入客户名称', trigger: 'blur'},
          ],
          withdrawMoney: [
            {required: true, validator: chargeM, trigger: 'blur'},
          ],
          withdrawSummary: [
            {required: true, message: '请输入扣款摘要', trigger: 'blur'},
          ],
          withdrawDate:[
          	{ required: true, validator: cdate, trigger: 'blur' },
          ]
        },
        outSumMoney: "",
        inSumMoney: "",
        form: {                           //高级搜索数据
          keyName: '',                       //关键字
          payType: '',                    //支付方式
          paymentType: '',                 //收支类型
          dataTime: '',                   //时间范围
        },
      }
    },
    methods: {
//----------------------------------/* start 充值附件    upload */
    	vFun_upload_remove(file,fileList){
    		this.$refs['rechargeForm'].$el.style.height=this.$refs['rechargeForm'].$el.clientHeight+(fileList.length*26)+'px';
 				this.axios({
					method:"DELETE",
					url:"/v3/basic/files/delete",
					data:{
						"fromTable":"FundRecharge",
						"fromCode":this.vue_upload_rechargeData.fromCode,
						"fileUrl":file.response||file.fileUrl
					}
				}).then((res)=>{
					this.Public.openSuccess(this,'操作成功！');
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				})
    	},
    	vFun_upload_success(res,file,fileList){
    		this.$refs['rechargeForm'].$el.style.height=this.$refs['rechargeForm'].$el.clientHeight+(fileList.length*26)+'px';
    		//this.urlStr = '';
    		fileList.forEach((item,index,arr)=>{
    			//this.urlStr += item.response+','
    		})
    	},
    	vFun_upload_error(err,file,fileList){
    		this.Public.openError(this,'上传失败，请重新上传！')
    	},
    	vFun_upload_before(file){
    		debugger;
    		this.vue_upload_rechargeData.fileName=file.name; //获取上传时的fileName
    		const typeArr = ['xls','xlsx','doc','docx','png','jpg','jpeg','txt'];  //定义上传的类型
        const isLt4M = file.size / 1024 / 1024 <= 4;  //判断文件大小
    		let FileName = file.name.substr(file.name.lastIndexOf('.')+1);  //得到上传的类型

        if (typeArr.indexOf(FileName)===-1) {  //判断类型
        	this.Public.openError(this,"上传附件类型有误!")
        }

        if (!isLt4M) {  //判断大小
        	this.Public.openError(this,"上传附件大小不能超过 4MB!")
        }
        return (typeArr.indexOf(FileName)!==-1) && isLt4M;
    	},
//------------------------------/*充值附件 end upload */

//------------------------------start  扣款附件 --------------
    	/* start upload */
    	vFun_upload_remove1(file,fileList){
    		this.$refs['chargeFromData'].$el.style.height=this.$refs['chargeFromData'].$el.clientHeight+(fileList.length*26)+'px';
 				this.axios({
					method:"DELETE",
					url:"/v3/basic/files/delete",
					data:{
						"fromTable":"FundWithdraw",
						"fromCode":this.vue_upload_withdrawData.fromCode,
						"fileUrl":file.response||file.fileUrl
					}
				}).then((res)=>{
					this.Public.openSuccess(this,'操作成功！');
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
				})
    	},
    	vFun_upload_success1(res,file,fileList){
    		this.$refs['chargeFromData'].$el.style.height=this.$refs['chargeFromData'].$el.clientHeight+(fileList.length*26)+'px';
    		//this.urlStr = '';
    		fileList.forEach((item,index,arr)=>{
    			//this.urlStr += item.response+','
    		})
    	},
    	vFun_upload_error1(err,file,fileList){
    		this.Public.openError(this,'上传失败，请重新上传！')
    	},
    	vFun_upload_before1(file){
    		this.vue_upload_withdrawData.fileName=file.name; //获取上传时的fileName
    		const typeArr = ['xls','xlsx','doc','docx','png','jpg','jpeg','txt'];  //定义上传的类型
        const isLt4M = file.size / 1024 / 1024 <= 4;  //判断文件大小
    		let FileName = file.name.substr(file.name.lastIndexOf('.')+1);  //得到上传的类型

        if (typeArr.indexOf(FileName)===-1) {  //判断类型
        	this.Public.openError(this,"上传附件类型有误!")
        }

        if (!isLt4M) {  //判断大小
        	this.Public.openError(this,"上传附件大小不能超过 4MB!")
        }
        return (typeArr.indexOf(FileName)!==-1) && isLt4M;
    	},
//---------------------------------- /*扣款附件 end upload */

      dateChange(){
        this.queryByPage();
    	},
//--------------------------充值弹出层     start------------------------
      rechargeCancel(){                                          //充值取消
        this.recharge = false;
        this.$refs.rechargeForm.resetFields();
      },

      rechargeSure(){                                 //充值确认
        this.$refs.rechargeForm.validate((valid) => {
          if (valid) {
            this.clickBtn=!this.clickBtn;
            this.axios({
              method: 'post',
              url: "/v3/fund/recharges",
              data: {
                "memberName": this.rechargeForm.memberName,
                "rechargeDate": this.rechargeForm.rechargeDate,
                "rechargeMoney": this.rechargeForm.rechargeMoney,
                "rechargeRemark": this.rechargeForm.rechargeRemark,
                "rechargeSummary": this.rechargeForm.rechargeSummary,
                "fundCode": this.rechargeForm.fundCode,
                "memberCode": this.rechargeForm.memberCode,
                "rechargeCode":this.vue_upload_rechargeData.fromCode,
              }
            }).then((res) => {
                this.clickBtn=!this.clickBtn;
                this.recharge = false;
                this.$refs.rechargeForm.resetFields();
                this.Public.openSuccess(this,"操作成功！");
            }).catch((err)=>{
            	  this.clickBtn=!this.clickBtn;
					      this.Public.openError(this,err.response.data)
				    });
          } else {
            this.openError('请完善所填信息');
            return false;
          }
        });
      },
      rechargeBn(){
      	this.getRechargeMaxBillNum();
        this.recharge = true;
        this.rechargeForm.memberName = this.pageData.memberName;
        this.rechargeForm.fundCode = this.pageData.fundCode;
        this.rechargeForm.memberCode = this.pageData.memberCode;
        this.$refs['rechargeForm'].$children[5].$children["0"].$children[1].$el.innerHTML='';
      },
//--------------------------扣款弹出层    start--------------------------
      chargeBackCancel(){                               //扣款取消
        this.chargeBack = false;
        this.$refs.chargeFromData.resetFields();
      },
      chargeBackSure(){                                 //扣款确认
        this.$refs.chargeFromData.validate((valid) => {
          if (valid) {
            this.clickBtn=!this.clickBtn;
            this.axios({
              method: 'post',
              url: "/v3/fund/withdraws",
              data: {
                "memberName": this.chargeFromData.memberName,
                "withdrawDate": this.chargeFromData.withdrawDate,
                "withdrawMoney": this.chargeFromData.withdrawMoney,
                "withdrawSummary": this.chargeFromData.withdrawSummary,
                "withdrawRemark": this.chargeFromData.withdrawRemark,
                "fundCode": this.chargeFromData.fundCode,
                "memberCode": this.chargeFromData.memberCode,
                "withdrawCode":this.vue_upload_withdrawData.fromCode,
              }
            }).then((res) => {
                this.clickBtn=!this.clickBtn;
                this.chargeBack = false;
                this.$refs.chargeFromData.resetFields();
                this.Public.openSuccess(this,"操作成功！")
            }).catch((err)=>{
            	  this.clickBtn=!this.clickBtn;
					      this.Public.openError(this,err.response.data)
				    });
          } else {
            this.openError('所填信息错误');
            return false;
          }
        });

      },
      chargeBackBn(){
      	this.getWithdrawMaxBillNum();
        this.chargeBack = true;
        this.chargeFromData.memberName = this.pageData.memberName;
        this.chargeFromData.fundCode = this.pageData.fundCode;
        this.chargeFromData.memberCode = this.pageData.memberCode;
        this.$refs['chargeBackForm'].$children[5].$children["0"].$children[1].$el.innerHTML='';
      },
//-------------------------详情弹出层  start-----------------------------
      goTo(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '现金充值',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '金额： '),
                  h('i', {style: 'color: #415161'}, data[index].fundNowAvailMoney)
                ],
              ),
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '支付方式：'),
                  h('i', {style: 'color: #415161'}, data[index].fromActionStr)
                ],
              ),
              h('p', {style: 'margin-bottom: 30px;'}, [
                  h('span', {style: 'color:#96a6b6'}, '备注：'),
                  h('i', {style: 'color: #415161'}, data[index].listRemark==""?"无":data[index].listRemark)
                ],
              ),
              h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '流水号： '),
                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].listCode),
                  h('span', {style: 'color:#96a6b6'}, '日期： '),
                  h('i', {style: 'color: #415161'}, data[index].createDateStr)
                ],
              ),
              /*h('p', null, [
                  h('span', {style: 'color:#96a6b6'}, '操作人：'),
                  h('i', {style: 'margin-right: 30px;color: #415161'}, data[index].createDateStr),
                  h('span', {style: 'color:#96a6b6'}, '审核人： '),
                  h('i', {style: 'color: #415161'}, data[index].createDateStr)
                ],
              ),*/
            ],
          ),
          customClass: "dDFk",
          showCancelButton: true,
          confirmButtonText: '确定',
          showCancelButton: false
        }).then(action => {

        });
      },
//-------------------------红冲出层   start------------------------------
      voidPay(index, data){
        const h = this.$createElement;
        this.$msgbox({
          title: '确认',
          message: h('div', {style: 'padding:20px;'}, [
              h('p', {style: 'text-align: center;font-size: 16px;color: #415161;text-align: center;line-height: 25px;margin-bottom: 8px;'}, '是否确认红冲此记录？？'),
            ],
          ),
          customClass: "surePay",
          showCancelButton: true,
          confirmButtonText: '确定',
        }).then(action => {

        });

      },
//-------------------------高级搜索     start----------------------------
      heightSearchShow(){
      	this.heightSearch=true;
      	/*对左侧的时间范围输入框进行清空*/
      	this.valueData = [];
      },
      searchCancel(){
        this.heightSearch = false;
        this.$refs.Form.resetFields();
      },
      searchClear(){
        this.$refs.Form.resetFields();
      },
      searchSure(){
      	//高级搜索

        this.axios({
	        method: "post",
	        url: "/v3/fund/lists/list",
	        data: {
            "offset":(this.pageTools.pageNo - 1) * this.pageTools.pageSize,
            "limit":this.pageTools.pageSize,
	        	"memberCode":this.Public.getCookie("memberCode"),
	        	"listCode":this.form.keyName,
	        	"listInoutType":this.form.paymentType,
	        	"start":this.form.dataTime[0],
	        	"end":this.form.dataTime[1],
	        }
	      }).then((res) => {
            this.queryByPage();
		        this.heightSearch = false;
            this.$refs.Form.resetFields();
	      }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
      },
//-------------------------分页设置   start------------------------------
      page_handleSizeChange(val) {
        this.pageTools.pageSize = val;
        this.queryByPage();
      },
      page_handleCurrentChange(val) {
        this.pageTools.pageNo = val;
        this.queryByPage();
      },
//----------------------获取充值最大号 ------------------------------------
			getRechargeMaxBillNum(){
			  this.axios({
	        method: "get",
	        url: "/v3/misc/common/getMaxBillNum",
	        params: {
	        	"columnName":"rechargeCode",
	        	"billtypeCode":"FundRecharge001",
	        }
	      }).then((res) => {
	      		console.log(res.data)
						this.vue_upload_rechargeData.fromCode=res.data;
	      }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
			},
//----------------------获取扣款最大号 ------------------------------------
			getWithdrawMaxBillNum(){
			  this.axios({
	        method: "get",
	        url: "/v3/misc/common/getMaxBillNum",
	        params: {
	        	"columnName":"withdrawCode",
	        	"billtypeCode":"FundWithdraw001",
	        }
	      }).then((res) => {
	      		console.log(res.data)
						this.vue_upload_withdrawData.fromCode=res.data;
	      }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
			},
//---------------------请求列表数据 --------------------------------------
      queryByPage(){
        this.axios({
          method: "post",
          url: "/v3/fund/lists/list",
          data: {
            "offset":(this.pageTools.pageNo - 1) * this.pageTools.pageSize,
            "limit":this.pageTools.pageSize,
            "memberCode":this.Public.getCookie("memberCode"),
            "supStartDate":this.valueData[0],
            "supEndDate":this.valueData[1],
          }
        }).then((res) => {
          this.tableData = res.data.list;
          this.pageTools = res.data.pageTools;
          this.pageTools.pageSizeOptions = JSON.parse(this.pageTools.pageSizeOptions);
          res.data.list.forEach((item, index, arr) => {
            item.outListMoney= this.Public.formatMoney(item.outListMoney, 2);
            item.inListMoney = this.Public.formatMoney(item.inListMoney, 2);
            item.fundNowAvailMoney = this.Public.formatMoney(item.fundNowAvailMoney, 2)
          });
          this.inSumMoney = res.data.sumInfo.inSum;
          this.outSumMoney = res.data.sumInfo.outSum;
          this.inSumMoney = this.Public.formatMoney(res.data.sumInfo.inSum, 2);
          this.outSumMoney = this.Public.formatMoney(res.data.sumInfo.outSum, 2);
        }).catch((err)=>{
          this.Public.openError(this,err.response.data)
        });
      },

    },
    created(){
      (()=>{
      	 this.axios({
	        method: "get",
	        url: "/v3/basic/funds/"+this.Public.getCookie("fundCode"),
	        data: {}
	      }).then((res) => {
	          this.pageData = res.data;
	          this.pageData.fundAvailMoney = this.Public.formatMoney(res.data.fundAvailMoney, 2);
	          this.pageData.fundLockMoney = this.Public.formatMoney(res.data.fundLockMoney, 2);
	          this.pageData.fundMoney = this.Public.formatMoney(res.data.fundMoney, 2);
	          this.chargeFromData.memberName = res.data.memberName;
	          this.rechargeForm.memberName = res.data.memberName;
	          this.gradeName = res.data.gradeName;
	      }).catch((err)=>{
			      this.Public.openError(this,err.response.data)
		    });
      })();
    },
    mounted(){
      this.pageTools = this.$store.state.page;
      this.queryByPage();
//-------------------------设置页面某块区域高度   satrt-------------------------
      this.$refs.contentWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
      window.onresize = () => {
        this.$refs.contentWrap.style.height = (document.documentElement.clientHeight - 180) + 'px';
      };

    }
  }
</script>

<style scoped>
  @import "../../../assets/css/zijin.css";

  .el-upload__tip {
    float: left;
    width: 280px;
   	height:40px;
   	overflow:hidden;
   	text-overflow:ellipsis;
    line-height: 20px;
    margin-top: 0px;
  }

  .elButton {
    float: left;
    width: 100px !important;
    background: #13C19F!important;
    color: white!important;
  }

  .elButton em {
    font-size: 12px;
    margin-right: 6px;
  }

  .zJ-box > .block {
    float: right;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .el-form {
    overflow: hidden;
  }

  .el-form .el-form-item:last-child {
    width: 100%;
  }

  .el-form-item {
    width: 485px;
    float: left;
    margin-right: 10px;
  }

  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
    margin-bottom: 20px;
  }

  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    background-color: rgba(240, 240, 240, 0.2);
  }

  .height-s-con {
    position: absolute;
    width: 100%;
    height: 275px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .recharge-s-con {
    position: absolute;
    width: 100%;
    height:auto;
    min-height: 440px;
    max-height:586px;
    top: 0;
    left: 0;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
    overflow: hidden;
  }

  .p {
    text-indent: 10px;
    line-height: 30px;
    cursor: pointer;
  }

  .p em {
    position: relative;
    top: 2px;
    margin-right: 3px;
  }

  .p:hover {
    background: #eef1f9;
    color: #03B8CC;
  }

  .zJ-box {
    overflow-y: auto;
  }

  .fund-totalBlance-txt {
    font-size: 13px;
  }

  .fund-totalBlance-val {
    font-size: 28px;
    line-height: 42px;
  }

  .div2 {
    background: #8486f3;
    margin-right: 0px !important;
  }

  .div1 {
    background: #03a9f3;
  }

  .moneyList > .moneyListCon > div {
    height: 85px;
    color: #fff;
    padding-top: 25px;
    text-align: center;
    margin: 0 16px 0px 0px;
  }

  .moneyList > .moneyListCon {
    float: left;
    position: relative;
    width: 50%;
  }

  .moneyList {
    width: 100%;
    height: 110px;
    margin-bottom: 10px;
    background-color: #fff;
    margin-top: 10px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: .4s;
  }

  .fade-enter, .fade-leave-active {
    opacity: 0;
  }

  .slideDown-enter-active, .slideDown-leave-active {
    transition: .4s;
  }

  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }

  .high_search {
    line-height: 36px;
    color: #93a6b7;
    margin-left: 20px;
    cursor: pointer;
  }

  .high_search:hover {
    color: #13C19F;
  }

  .el-dropdown-menu {
    left: 195px !important;
  }

  .fontW {
    font-weight: bold;
  }

  .zJ-table {
    width: 100%;
    border: 1px solid #e7e9f1;
    margin-bottom: 10px;
  }

  .zJ-table tr th {
    width: 32%;
    border-bottom: 1px solid #e7e9f1;
    height: 50px;
    background: #eff1f8;
    font-weight: normal;
    border-right: 1px solid #e7e9f1;
  }

  .zJ-table tr th:last-child {
    width: 26%;
  }

  .zJ-table tr td {
    width: 40%;
    border-bottom: 1px solid #e7e9f1;
    text-align: center;
    height: 60px;
    border-right: 1px solid #e7e9f1;
  }

  .zJ-table tr td a {
    margin:0px 15px;
    cursor: pointer;
    color: #13c19f;
  }

  .zJ-header-span {
    color: #96a6b6;
    line-height: 34px;
    margin-right: 30px;

  }

  .zJ-header-span i {
    color: #415161;
  }

  .zJ-header-span1 {
    color: #96a6b6;
    line-height: 34px;

  }

  .zJ-header-span1 i {
    color: #f96868;
  }

  .zJ-header1 {
    padding: 8px 0;
    min-height: 34px;
  }

  section {
    display: flex;
    flex-direction: column;
    flex: 1;

  }

  div.location {
    flex: 0 0 10px;
    padding: 3px 0 15px 0;
  }

  div.content {
    position: relative;
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  .ziJin-con {
    padding: 0px 14px;
    position: relative;
  }

</style>
